<script setup>
import { ref, reactive, watch, onMounted, computed, nextTick, h, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { eventnodeuserApi, formById, nodeById, eventlogApi, edgeByIdClick, eventById, eventnodeuserCount, eventByIdMessage, iuserApi } from '@T2/service/api.ts';
import { useCurrentWatchStore, useIuserInfoStore } from '@T2/store/users.ts';
import { isJSON, downloadFiles } from '@T2/utils/utils.ts';
import Nodeuser from './nodeuser.vue';
import dayjs from 'dayjs';
import CheckSvg from '~icons/custom/check';

const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;
const iuserInfoStore = useIuserInfoStore();
const { created_company, info, getHandleRight, admin_projects2, project_roles } = iuserInfoStore;
const isSuper = !!(curProject.id && admin_projects2.includes(curProject.id)) || created_company === info.company;

const drawer = ref('')
const viewNodeRoles = ref('')
const nowNodeUser = ref(false);
const show = ref(true);
const currentNode = ref(null);
const nodeuserRf = ref({ txt: '' });
const typeObj = ref({})
const gsNodeValue = ref([])

const RtFrist = reactive({
  firstNode: null,
  edge: null,
  nextNode: null,
  config: null,
  name: ''
});
const { flow, event, type } = defineProps({
  flow: {
    type: Object,
    required: true,
  },
  event: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  }
});
const emits = defineEmits(['closed']);
const AllNodeuser = ref([]);

onMounted(async () => {
  Rt.currentNode = await getNodeDetail();
  if (type === '流转') {
    if (isJSON(Rt.currentNode.roles)) {
      Rt.currentNode._roles = JSON.parse(Rt.currentNode.roles);
    }
  }
  currentNode.value = await getNodeDetail();
  init();
  getStepAndNodeusers();
  let alluserNode = await getEventnodeuserList({ id: event.id, node: '' })
  AllNodeuser.value = alluserNode;
  let nowNode = alluserNode.filter((item) => {
    return item.node == Rt.currentNode.id && item.create_user == info.id
  })
  if(!nowNode.length){
    nowNodeUser.value = true;
  }else{
    nowNodeUser.value = false;
  }
  setTimeout(() => {
    console.log('AllNodeuser', AllNodeuser);
  }, 5000);

});

const getOptions = (identity) => {
  iuserApi({
    method: 'get',
    params: {
      identity,
      pagesize: 1
    }
  }).then(res => {
    console.log(res);
    typeObj.value[identity] = res.count
  });
}

const nextAble = computed(() => {
  if(Rt.currentNode?.label.includes('发起')){
    return true
  }
  //投票，且已结束/已投票
  if(Rt.endtime && (!dayjs().isBefore(Rt.endtime) || !nowNodeUser.value)){
    return true
  }
  //投票，未结束且未投票
  if(Rt.endtime && dayjs().isBefore(Rt.endtime) && nowNodeUser.value){
    return false
  }
  if (!Rt.currentNode?._roles?.length) {
    return true
  }
  if (isSuper) {
    return true
  }
  return project_roles.some(item => Rt.currentNode._roles.includes(item.id));
})
const Rt = reactive({
  currentNode: null,
  edges: [],
  config: [],
  endtime: null,
  form_data: [],
  vote: null,
});
const messageRt = reactive({
  need: false,
  checked: true,
})
const init = async () => {
  if (type === '详情') {
    return;
  }

  const { nodes, edges } = flow?.fron_data || {};
  Rt.edges = Rt.currentNode.label == '结束公示'?[]: edges.filter(i => i.sourceNodeId === Rt.currentNode.front_id);

  //修改基础信息
  RtFrist.firstNode = nodes.find(i => i.type === 'first');
  setTimeout(async () => {
    RtFrist.edge = edges.find(i => i.sourceNodeId === RtFrist.firstNode.id);
    const form = await getFormDetail(RtFrist.firstNode.properties.form);
    RtFrist.nextNode = nodes.find(i => i.id === RtFrist.edge.targetNodeId);
    RtFrist.name = { ID: 3, type: 'textarea', UDID: 'input', rows: 1, span: 2, required: true, label: '项目名称', value: event.name, owner: 'CommonInput' }
    RtFrist.config = form?.id ? JSON.parse(form.config) : null;
    if (RtFrist.config) {
      RtFrist.config.forEach((item, index) => {
        item.value = event._request_params[index].value
        item['edit'] = true;

      });
    }
  }, 300);
  // if (!Rt.edges?.length) {
  //   ElMessage.error('未知故障！');
  //   return;
  // }
  setTimeout(() => {
    console.log('edges', Rt.edges);

  }, 1000);
  const form = await getFormDetail(Rt.currentNode.form);
  let eventParams = event.request_params ? JSON.parse(event.request_params) : '';
  console.log('form', form);
  ElMessage.closeAll();
  Rt.config = form?.id ? JSON.parse(form.config) : [];
  /* 名称默认为项目名称 */
  Rt.config.forEach((item,index) => {
    let baseContent = eventParams ? eventParams.filter((par)=>par.label=='内容')[0].value : ''
    if (item?.label === '会议内容' || item?.label === '征询内容' || item?.label === '投票内容' || item?.label === '投票内容' || item?.label === '公示内容') {
      item.value = baseContent
    }
    if (item?.sign === 'name') {
      item.value = event.name;
    } else if (item?.sign === 'identity') {
      console.log('form.name',form.name);
      messageRt.need = Rt.currentNode.before_node ? false : true;
      if(form.name.includes('业委会')){
        item.value = '业委会成员,业委会主任'
      }else if(form.name.includes('业主代表')){
        item.value = '业主代表,业委会成,业委会主任'
      }else{
        item.value = '业主,业主代表,业委会成员,业委会主任'
      }
    }
  });

  if (Rt.currentNode.before_node && isJSON(event.form_data)) {
    const form_data = JSON.parse(event.form_data);
    Rt.endtime = form_data.find(i => i.sign === 'endtime')?.value;
  } else {
    Rt.endtime = null;
  }
  nextTick(async () => {
    if (Rt.currentNode.before_node && Rt.currentNode.type !== 'end' && type === '流转') {
      const userAllCount = await getEventnodeuserCount(); //投票数据统计
      let nodeusers = userAllCount.filter(nodeuser => nodeuser.node === Rt.currentNode.id);
      const nodeuser = { '赞成': 0, '反对': 0 };
      nodeusers.forEach(item => {
        nodeuser[item.mark] = item.count;
      });
      Rt.form_data = [
        {
          label: '投票状态',
          value: dayjs().isBefore(Rt.endtime) ? '进行中...' : '已结束',
        },
        {
          label: '赞成',
          value: nodeuser['赞成'] || 0,
        },
        {
          label: '反对',
          value: nodeuser['反对'] || 0,
        }
      ]
    }
  })
  setTimeout(() => {
    console.log('Rt', Rt);
  }, 5000);
}
const getFormDetail = (id) => {
  if (!id) {
    return null;
  }
  return new Promise((resolve, reject) => {
    formById({
      method: 'get',
      id
    }).then(res => {
      resolve(res);
    }).catch(err => {
      resolve(err);
    });
  })
}
const getNodeDetail = () => {
  return new Promise((resolve, reject) => {
    nodeById({
      method: 'get',
      id: event.node,
    }).then(res => {
      resolve(res);
    }).catch(err => {
      resolve(err);
    });
  })
}
const getEventnodeuserList = (event) => {
  // 获取投票用户列表
  return new Promise((resolve, reject) => {
    eventnodeuserApi({
      method: 'get',
      params: {
        event: event.id,
        node: event.node
      }
    }).then(res => {
      resolve(res?.results || []);
    }).catch(err => {
      reject([]);
    })
  })
}

/* 异步加载组件 */
const mapLoading = {
  loadingComponent: {
    template: '<div>加载 A 中...</div>',
  },
  errorComponent: {
    template: '<div>加载失败</div>',
  },
  delay: 200,
  timeout: 5000,
};
const showComponentsMap = {
  input: defineAsyncComponent({
    loader: () => import('../plugin/show/input.vue'),
    ...mapLoading,
  }),
  datetimePicker: defineAsyncComponent({
    loader: () => import('../plugin/show/datetimePicker.vue'),
    ...mapLoading,
  }),
  select: defineAsyncComponent({
    loader: () => import('../plugin/show/select.vue'),
    ...mapLoading,
  }),
  uploadImage: defineAsyncComponent({
    loader: () => import('../plugin/show/uploadImage.vue'),
    ...mapLoading,
  }),
  uploadAttachment: defineAsyncComponent({
    loader: () => import('../plugin/show/uploadAttachment.vue'),
    ...mapLoading,
  }),
};
const getShowComponent = (item) => {
  return showComponentsMap[item.UDID] || null;
}

const getStepAndNodeusers = async () => {
  steplist.value = [];
  const res = await Promise.all([getStepList(), getEventnodeuserCount()]);
  const stepList = res[0];
  for (let i = 0; i < stepList.length; i++) {
    const item = stepList[i];
    if (isJSON(item.form_data)) {
      let newFormData = JSON.parse(item.form_data);
      item._form_data = newFormData;
      newFormData.forEach(item => {
        if (item.label === '参与角色') {
          let roles = item.value?.split(',') || [];
          roles.forEach((role)=>{
            getOptions(role)
          })
        }
      });
    } else {
      item._form_data = [];
    }
    const nodeusers = res[1].filter(nodeuser => nodeuser.node === item.node_id);
    const nodeuser = { '赞成': 0, '反对': 0 };
    nodeusers.forEach(item => {
      nodeuser[item.mark] = item.count;
    });
    item._nodeuserCount = nodeusers?.length ? [nodeuser] : [];
    if(item.node_name == '发布公示'){
      resolveGsNode(item,stepList[i-1],stepList)
    }
    steplist.value.push(item);
  }
  setTimeout(() => {
    console.log(steplist.value);
  }, 1000);
  if (Rt.currentNode?.id) {
    const nodeusers = res[1].filter(nodeuser => nodeuser.node === Rt.currentNode.id);
    const nodeuser = { '赞成': 0, '反对': 0 };
    nodeusers.forEach(item => {
      nodeuser[item.mark] = item.count;
    });
    if (nodeusers.length) {
      Rt.vote = {
        node_name: Rt.currentNode.label,
        node_id: Rt.currentNode.id,
        data: [nodeuser]
      };
    }
  }
  /* 自动滑到最底部 */
  setTimeout(() => {
    const container = document.querySelector('.scroller-aside');
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  }, 200);
}
const resolveGsNode = async (node,showNode,stepList)=>{
  const event = await getNodeDetail(node?.node_id)
  let showNodeId = event?.show_node || showNode.node_id
  let nodeInfo = stepList.filter((item)=>item.node_id == showNodeId)

      //处理投票数据展示
    const userAllCount = await getEventnodeuserCount(); //投票数据统计
    let nodeusers = userAllCount.filter(nodeuser => nodeuser.node === showNodeId);
    const nodeuser = { '赞成': 0, '反对': 0 };
    nodeusers.forEach(item => {
      nodeuser[item.mark] = item.count;
    });
    gsNodeValue.value = [
      {
        label: '投票结果',
        value: nodeInfo.length ?  nodeInfo[0]?.edge_label || '' :'',
      },
      {
        label: '赞成',
        value: (nodeuser['赞成'] || 0) + '票',
      },
      {
        label: '反对',
        value: (nodeuser['反对'] || 0) + '票',
      }
    ]
}
const steplist = ref([]);
const getStepList = () => {
  return new Promise((resolve, reject) => {
    eventlogApi({
      method: 'get',
      params: {
        ordering: 'create_time',
        event: event.id,
      }
    }).then(res => {
      resolve(res?.results || []);
    }).catch(err => {
      resolve([]);
    });
  });
}
const getEventnodeuserCount = () => {
  return new Promise((resolve, reject) => {
    eventnodeuserCount({
      method: 'get',
      params: {
        event: event.id,
      }
    }).then(res => {
      resolve(res || []);
    }).catch(err => {
      resolve([]);
    });
  });
}

/* 新增编辑 */
const EditComponentsMap = {
  input: defineAsyncComponent({
    loader: () => import('../plugin/edit/input.vue'),
    ...mapLoading,
  }),
  datetimePicker: defineAsyncComponent({
    loader: () => import('../plugin/edit/datetimePicker.vue'),
    ...mapLoading,
  }),
  select: defineAsyncComponent({
    loader: () => import('../plugin/edit/select/index.vue'),
    ...mapLoading,
  }),
  uploadImage: defineAsyncComponent({
    loader: () => import('../plugin/edit/uploadImage.vue'),
    ...mapLoading,
  }),
  uploadAttachment: defineAsyncComponent({
    loader: () => import('../plugin/edit/uploadAttachment.vue'),
    ...mapLoading,
  }),
};
const getEditComponent = (item) => {
  return EditComponentsMap[item.UDID] || null;
}
const formChange = (item, value, showStr) => {
  item.value = value;
  if (showStr) {
    item.showStr = showStr;
  }
}

const handleMainNextEdge = (edge_sql_id) => {
  console.log(Rt);
  // if(Rt){
  //   return
  // }

  if (Rt.config.find(item => item.required && !item.value)) {
    ElMessage.error('必填项未填写完整！');
    return;
  }

  if (!Rt.currentNode?.before_node) {
    EditStep(edge_sql_id);
    return;
  }

  if (!isJSON(event.form_data)) {
    ElMessage.error('未知故障，请检查流程配置！');
    return;
  }

  const form_data = JSON.parse(event.form_data);
  const endtime = form_data.find(i => i.sign === 'endtime')?.value;

  if (!endtime) {
    ElMessage.error('未知故障，请检查流程配置！');
    return;
  }
  if (dayjs().isAfter(endtime)) {
    EditStep(edge_sql_id);
    return;
  }

  ElMessageBox.confirm('', {
    message: h('div', null, [
      h('p', { style: 'font-size:16px;color: #4C4C4C;font-weight:500;' }, `投票时间尚未结束，您确定要直接进行下一步吗？`),
    ]),
    type: 'warning',
    confirmButtonText: '确认',
  }).then(() => {
    EditStep(edge_sql_id);
  }).catch(() => {
    ElMessage.info('已取消');
  });
}
const EditStep = (edge_sql_id) => {
  let obj = {};
  let messageFlag = '';
  if (Rt.config) {
    const req = Rt.config.map(i => {
      let tp = {};
      if (i.sign) {
        tp.sign = i.sign;
        if (i.sign === 'identity') {
          messageFlag = i.value;
        }
      }
      if (i.showStr) {
        tp.showStr = i.showStr;
      }
      return { label: i.label, value: i.value, span: i.span, UDID: i.UDID, ...tp }
    });
    obj.form_data = JSON.stringify(req);
  }
  if (messageRt.checked && messageFlag && messageFlag !== '业主') {
    eventByIdMessage({
      method: 'post',
      id: event.id,
      data: {
        identity: messageFlag,
      }
    }).then(res => {
      ElMessage.success(`已发送消息给${messageFlag}`);
    });
  }
  edgeByIdClick({
    method: 'post',
    id: edge_sql_id,
    data: {
      iuser: info.id,
      event: event.id,
      ...obj,
    }
  }).then(res => {
    handleCancel(true);
    ElMessage.success('已流转至下一步！');
  }).catch(err => {
    handleCancel(true);
  });
}
const handleCancel = (refresh = false) => {
  emits('closed', refresh);
}

/* 查看日志节点对应的用户操作详情 */
const nodeuserRt = reactive({
  show: false,
  title: '',
  nodeID: null,
});
const handleNodeUser = (title,nodeID,_form_data) => {
  let roles = _form_data.filter((item)=>item.label=='参与角色')
  console.log(roles);
  if(roles.length && roles[0].value){
    viewNodeRoles.value = roles[0].value
  }
  nodeuserRt.show = true;
  nodeuserRt.title = title;
  nodeuserRt.nodeID = nodeID;
}
const NodeUserClose = () => {
  nodeuserRt.show = false;
  nodeuserRt.title = '';
  nodeuserRt.nodeID = null;
}
const stepListInfo = computed(() => {
  console.log(flow);

  if (!flow.fron_data) {
    return []
  }
  let topStep = flow.fron_data.nodes.filter(item => item.type === 'first')
  let centerStep = flow.fron_data.nodes.filter(item => item.type === 'center' && item.text.value !== '结束公示')
  let endStep = flow.fron_data.nodes.filter(item => item.type === 'end').slice(0, 1)
  centerStep = centerStep.sort((a, b) => a.y - b.y)
  return [...topStep, ...centerStep, ...endStep]
})

const isChooseNode = (node, sec) => {
  if (node.text.value == '开始') {
    return true
  }
  if (!steplist.value.length) {
    return false
  }
  let includList = steplist.value.filter((item) => item.node_id == node.properties.sql_id)
  if (currentNode.value?.type == 'end' && node.text.value.includes('结束')) {
    return true
  }
  if (!currentNode.value?.type == 'end' && node.text.value.includes('结束')) {
    return false
  }
  if (sec && currentNode.value?.label == node.text.value) {
    return true
  }
  return includList.length ? true : false
}

const editBaseInfo = async (config, name) => {
  console.log(config, name);

  if (!name) {
    // showNotify({ type: 'warning', message: '请输入项目名称!' });
    ElMessage.error('请输入项目名称!');
    return
  }
  try {
    const newEvent = await eventById({
      method: 'patch', id: event.id,
      data: {
        request_params: JSON.stringify(config),
        name
      }
    });
    ElMessage.success('提交成功!');
  } catch (error) {
    console.log(error);

    ElMessage.error('更新失败!');
  }
}
const toTop = () => {
  drawer.value.scrollTop = 50
}
const haveFile = (_form_data) => {
  if (!_form_data || !_form_data.length) {
    return false;
  }
  let file = _form_data.filter((item) => item.UDID == "uploadAttachment")
  if (!file.length) {
    return false
  }
  if(file[0] && !file[0]?.url){
    return false
  }
  return file[0]
}
const downloadFile = (file) => {
  console.log(file);

  if (!file || !file.length) {
    return
  }
  downloadFiles(file[0].name, file[0].url)
}

const myHaveNode = (nodeid) => {
  if(!nodeid){
    return false
  }
  if (!AllNodeuser.value.length) {
    return false
  }
  let myNodeHave = AllNodeuser.value.filter((item) => {
    return item.node == nodeid && item.create_user == info.id

  })
  return myNodeHave.length ? myNodeHave[0].mark : false
}

const handleVote = (vote) => {
  if (!dayjs().isBefore(Rt.endtime)) {
    ElMessage.error('投票已结束');
    return;
  }
  if (vote === '反对' && !nodeuserRf.value.txt) {
    ElMessage.error('请填写反对意见！');
    return;
  }
  ElMessageBox.confirm('', {
    message: h('div', null, [
      h('p', { style: 'font-size:16px;color: #4C4C4C;font-weight:500;' }, `确定要提交投票吗？`),

    ]),
    type: 'warning',
    confirmButtonText: '确认',
  }).then(() => {
    eventnodeuserApi({
      method: 'post',
      data: {
        event: event.id,
        create_user: info.id,
        node: Rt.currentNode.id,
        project: curProject.id,
        txt: nodeuserRf.value.txt,
        mark: vote,
        type: info.company_name
      }
    }).then(res => {
      ElMessage.success('提交成功！');
      Rt.form_data = []
      nowNodeUser.value = false;
      handleCancel(true);
    });
  }).catch(() => {
    ElMessage.info('已取消');
  });
}
</script>

<template>

  <div>
    <el-drawer v-model="show" size="980" class="popup" @closed="handleCancel()">
      <template #header>
        <div class="drawer-header">{{ type === '详情' ? '详情' : event.status }}</div>
      </template>
      <template #default>
        <div class="content-box scroller-aside" ref="drawer">
          <!-- 头部步骤 -->
          <div class="content-step content-card" style="margin-bottom: 30px;" v-if="stepListInfo?.length">
            <div class="step-status-list">
              <div class="step-status" v-for="item, index in stepListInfo.slice(0, 6)">
                <div v-if="isChooseNode(item)" class="el-active-status">
                  <check-svg color="#009245" class="check-svg" />
                  <div class="step-line choose-line" v-if="index !== 5"></div>
                </div>
                <div class="el-default-status" v-else>
                  <span>{{ index + 1 }}</span>
                  <div class="step-line" v-if="index !== 5"></div>
                </div>
                <div class="step-title">{{ item.text.value }}</div>
              </div>
            </div>
            <div class="step-center-line">
              <div class="step-center">
                <div class="center-line" :class="isChooseNode(stepListInfo[5]) ? 'choose-line' : ''"></div>
              </div>
            </div>
            <div class="step-status-list">
              <div class="step-status" v-for="item, index in stepListInfo.slice(6).reverse()">
                <div v-if="isChooseNode(item)" class="el-active-status">
                  <check-svg color="#009245" class="check-svg" />
                  <div class="step-line choose-line" v-if="index !== 5"></div>
                </div>
                <div v-else-if="isChooseNode(item, true)" class="el-default-status">
                  <span>{{ 12 - index }}</span>
                  <div class="step-line choose-line" v-if="index !== 5"></div>
                </div>
                <div class="el-default-status" v-else>
                  <span>{{ 12 - index }}</span>
                  <div class="step-line" v-if="index !== 5"></div>
                </div>
                <div class="step-title">{{ item.text.value == '结束' ? '项目结束' :item.text.value }}</div>
              </div>
            </div>
          </div>
          <!-- 节点步骤 -->
          <el-steps direction="vertical" :active="3" style="height: fit-content;">
            <!-- 基础信息步骤 -->
            <el-step>
              <template #icon>
                <div class="step-icon"></div>
              </template>
              <template #title>
                <div class="step-header flex--center">
                  <span class="title-name">基础信息</span>
                </div>
              </template>
              <template #description v-if="type !== '流转' || (type == '流转' && ( Rt.endtime || currentNode?.type=='end' ||  currentNode?.label?.includes('公示') || currentNode?.label?.includes('中')))">
                <div class="detail-box flex flex-wrap">
                  <div class="form-item flex--center" style="width: 50%">
                    <p>名称：</p>
                    <div class="event-name">{{ event.name }}</div>
                  </div>
                  <template v-for="item in event._request_params">
                    <div class="form-item flex--center" :style="{ width: `calc(${50 * item.span}% )` }">
                      <p>{{ item.label }}：</p>
                      <component :config="item" :is="getShowComponent(item)" />
                    </div>
                  </template>
                </div>
              </template>
              <template #description v-else>
                <div class="detail-box">
                  <div class="form-item flex--center">
                    <p>
                      <label>创建人：</label>
                    </p>
                    <div class="value">{{ event.create_user_truename }}</div>
                  </div>
                  <div class="form-item flex--center">
                    <p>
                      <label>创建日期：</label>
                    </p>
                    <div class="value">
                      <el-icon color="#888888">
                        <Clock />
                      </el-icon> {{ event.create_time }}
                    </div>
                  </div>
                  <div class="form-item flex--center" style="width: 50%">
                    <p>项目名称：</p>
                    <div class="event-name">
                      <component :config="RtFrist.name" :is="getEditComponent(RtFrist.name)"
                        @change="(value, showStr) => formChange(RtFrist.name, value, showStr)" />
                    </div>
                  </div>
                  <template v-for="config, configIndex in RtFrist.config" :key="configIndex">
                    <div class="form-item flex--center">
                      <p>{{ config.label }}：</p>
                      <component :config="config" :is="getEditComponent(config)"
                        @change="(value, showStr) => formChange(config, value, showStr)" />
                    </div>
                  </template>
                </div>
                <label class="form-item"></label>
                <div class="row-value flex-end" v-if="!Rt.endtime && !currentNode?.label?.includes('结束') &&  !currentNode?.label?.includes('公示') && !currentNode?.label?.includes('中')">
                  <el-button type="primary" style="width: 100px;"
                    @click="editBaseInfo(RtFrist.config, RtFrist.name.value)">
                    修改
                  </el-button>
                </div>
              </template>
            </el-step>
            <!-- 接口流程步骤 -->
            <el-step v-for="stepItem, index in steplist" :key="index">
              <template #icon>
                <div class="step-icon" v-if="index == steplist.length-1 && currentNode?.status.includes('异常结束')" style="background-color: red;" ></div>
                <div class="step-icon" v-else ></div>
              </template>
              <template #title>
                <div class="step-header flex--center flex-sb" style="width: 100%;padding-right: 38px;">
                  <span class="title-name">
                    <span>{{ stepItem.node_name }}</span>
                    <template v-if="(stepItem.node_name.includes('投票') || stepItem.node_name.includes('意见')) && !stepItem.node_name.includes('发起')">
                      <span class="defaule-title" v-if="myHaveNode(stepItem.node_id)">我已投票:{{
                        myHaveNode(stepItem.node_id) }}</span>
                      <span class="defaule-title" v-else>我还未投票</span>
                    </template>
                  </span>
                  <div>
                    <template v-if="haveFile(steplist[index + 1] ? steplist[index + 1]._form_data : '')">
                      <el-button link type="primary" size="small"
                        @click="downloadFile(haveFile(steplist[index + 1]._form_data).value)"
                        style="margin-right: 30px;">
                        {{ haveFile(steplist[index + 1]._form_data).label }}
                      </el-button>
                    </template>
                    <span v-if="stepItem?._nodeuserCount?.length"
                      @click="handleNodeUser(stepItem.node_name, stepItem.node_id,steplist[index-1]._form_data)"
                      style="color: #409eff;font-weight: 400;cursor: pointer;font-size: 12px;">
                      投票详情
                    </span>
                  </div>
                  <!-- <el-icon color="#888888">
                    <Clock />
                  </el-icon>
                  <span class="create">{{ stepItem.create_time }}</span>
                  <span class="create">操作人：</span>
                  <strong>{{ stepItem.user_name }}</strong> -->
                </div>
              </template>
              <template #description>
                <div class="stepinfo-box flex flex-wrap">
                  <template v-if="(stepItem.node_name.includes('投票') || stepItem.node_name.includes('意见')) && !stepItem.node_name.includes('发起')">
                    <div class="form-item flex--center" style="width: 100%">
                      <p>投票状态：</p>
                      <div class="value">{{ stepItem.edge_label }}</div>
                    </div>
                    <div class="form-item flex--center" style="width: 100%">
                      <p>赞成票：</p>
                      <div class="flex-column value" style="width: 100%;align-items: flex-start;"
                        v-if="stepItem?._nodeuserCount?.length">
                        {{ stepItem._nodeuserCount[0]['赞成'] }}
                      </div>
                      <div class="flex-column value" style="width: 100%;align-items: flex-start;" v-else>
                        0
                      </div>
                    </div>
                    <div class="form-item flex--center" style="width: 100%">
                      <p>反对票：</p>
                      <div class="flex-column value" style="width: 100%;align-items: flex-start;"
                        v-if="stepItem?._nodeuserCount?.length">
                        {{ stepItem._nodeuserCount[0]['反对'] }}
                      </div>
                      <div class="flex-column value" style="width: 100%;align-items: flex-start;" v-else>
                        0
                      </div>
                    </div>
                  </template>
                  <!-- <div class="form-item flex--center" style="width: 100%" v-if="stepItem?._nodeuserCount?.length">
                    <p>结果展示：</p>
                    <div class="flex-column" style="width: 100%;align-items: flex-start;">
                      <el-table :data="stepItem._nodeuserCount">
                        <template v-for="(value, key) in stepItem._nodeuserCount[0]">
                          <el-table-column :label="key" :prop="key" min-width="140px" align="center" />
                        </template>
                        <el-table-column label="操作" fixed="right" min-width="100px">
                          <template #default="scope">
                            <el-button link type="primary"
                              @click="handleNodeUser(stepItem.node_name, stepItem.node_id)">
                              详情
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div> -->

                  <template v-if="stepItem.node_name == '主任审核'">
                    <div class="form-item flex--center" style="width:100%">
                      <p>审核结果：</p>
                      <div class="value">{{ stepItem.edge_label }}</div>
                    </div>
                  </template>
                  <template v-for="item in stepItem._form_data">
                    <div class="form-item flex--center" style="width:100%" v-if="item.UDID !== 'uploadAttachment' && item.label !== '参与角色'">
                      <p>{{ item.label }}：</p>
                      <component v-if="item?.value" :config="item" :is="getShowComponent(item)" />
                      <span class="value" v-else>暂无</span>
                      <!-- <span style="color:#a8abb2" v-if="item.label === '参与角色'">&nbsp;&nbsp;({{ typeObj[item.value]
                      }}人)</span> -->
                    </div>
                  </template>
                  <template v-if="gsNodeValue?.length && stepItem?.node_name == '发布公示'">
                    <div class="form-item flex--center" style="width:100%" v-for="item,index in gsNodeValue" :key="index">
                      <p>{{ item.label }}：</p>
                      <div class="value">{{ item?.value }}</div>
                    </div>
                  </template>

                  <template v-if="stepItem.node_name == '结束公示'">
                    <div class="form-item flex--center" style="width:100%">
                      <p>结束时间：</p>
                      <div class="value">{{ stepItem.create_time }}</div>
                    </div>
                  </template>
                </div>
              </template>
            </el-step>
            <!-- 流转-当前任务节点步骤 -->
            <el-step v-if="type === '流转'">
              <template #icon>
                <div class="step-icon edit"></div>
              </template>
              <template #title>
                <div class="step-header flex--center flex-sb" style="width: 100%;padding-right: 38px;">
                  <span class="title-name">
                    <span>{{ Rt.currentNode?.label }}</span>
                    <template v-if="(Rt.currentNode?.label.includes('投票') || Rt.currentNode?.label.includes('意见')) && !Rt.currentNode?.label.includes('发起')">
                      <span class="defaule-title" v-if="myHaveNode(Rt.currentNode.id)">我已投票:{{
                        myHaveNode(Rt.currentNode.id) }}</span>
                      <span class="defaule-title" v-else>我还未投票</span>
                    </template>
                  </span>
                  <!-- 判断是不是投票 -->
                  <div>
                    <!-- <template v-if="haveFile(steplist[steplist.length+1] ? steplist[steplist.length+1]._form_data : '')">
                      <el-button link type="primary" size="small"
                        @click="downloadFile(haveFile(steplist[steplist.length+1]._form_data).value)"
                        style="margin-right: 30px;">
                        {{ haveFile(steplist[steplist.length+1]._form_data).label }}
                      </el-button>
                    </template> -->
                    <span v-if="Rt?.vote?.data" @click="handleNodeUser(Rt.vote.node_name, Rt.vote.node_id,steplist[steplist.length-1]._form_data)" style="cursor: pointer;">
                    投票详情
                  </span>
                  </div>
                </div>
              </template>
              <template #description>
                <div class="edit-box flex flex-wrap">
                  <!-- 当前投票节点 -->
                  <template v-if="(Rt.currentNode?.before_node && myHaveNode(Rt?.currentNode?.id) ||  !dayjs().isBefore(Rt.endtime)) && !Rt.currentNode?.label?.includes('公示') && !Rt.config?.length">
                    <div class="form-item flex--center" style="width: 100%" v-if="Rt.endtime">
                      <p v-if="Rt.vote?.data.length">投票状态：</p>
                      <p v-else>状态：</p>
                      <div class="flex-column" style="color: #111111;">
                        {{ dayjs().isBefore(Rt.endtime) ? '进行中...' : '已结束' }}
                      </div>
                    </div>
                    <div class="form-item flex--center" style="width: 100%">
                      <p>赞成票：</p>
                      <div class="flex-column value" style="width: 100%;align-items: flex-start;"
                        v-if="Rt.vote?.data.length">
                        {{ Rt.vote.data[0]['赞成'] }}
                      </div>
                      <div class="flex-column value" v-else>0</div>
                    </div>
                    <div class="form-item flex--center" style="width: 100%">
                      <p>反对票：</p>
                      <div class="flex-column value" style="width: 100%;align-items: flex-start;"
                        v-if="Rt.vote?.data.length">
                        {{ Rt.vote.data[0]['反对'] }}
                      </div>
                      <div class="flex-column value" v-else>0</div>
                    </div>
                  </template>
                  <template v-if="Rt.currentNode?.before_node && !myHaveNode(Rt?.currentNode?.id) && dayjs().isBefore(Rt.endtime)">
                    <div class="form-item flex--center" style="width: 100%">
                      <p>我的意见：</p>
                      <div class="flex-column value" style="width: 100%;">
                        <textarea v-model="nodeuserRf.txt" rows="4" placeholder="请先填写意见或建议，然后投票" maxlength="200" style="width: 100%; box-shadow: none;
  background-color: #F7F7F7;border-radius: 4px;border: none;outline: none;padding: 10px;" />
                      </div>
                    </div>
                  </template>
                  <!-- 需要编辑的数据配置 -->
                  <template v-for="item in Rt.config">
                    <div class="form-item flex--center" style="width: 100%;" v-if="item.sign !== 'identity'">
                      <p>
                        <label :class="{ 'isRequired': item.required }">{{ item.label }}：</label>
                      </p>
                      <component :config="item" :is="getEditComponent(item)"
                        @change="(value, showStr) => formChange(item, value, showStr)" />
                    </div>
                  </template>
                  <!-- 编辑数据节点-通知 -->
                  <template v-if="messageRt.need">
                    <div class="form-item flex--center" style="width: 100%">
                      <p>
                        <label>通知方式：</label>
                      </p>
                      <el-checkbox v-model="messageRt.checked" label="短信通知" />
                    </div>
                  </template>
                </div>
              </template>
            </el-step>
            <el-step v-if="type !== '流转' && currentNode?.type == 'end' && !currentNode?.status.includes('正常结束')">
              <template #icon>
                <div class="step-icon edit" style="background-color: red;"></div>
              </template>
              <template #title>
                <div class="step-header flex--center flex-sb" style="width: 100%;padding-right: 38px;">
                  <span class="title-name">{{ currentNode?.label }}</span>
                </div>
              </template>
              <template #description>
                <div class="stepinfo-box flex flex-wrap">
                  <div class="form-item flex--center" style="width:100%">
                    <p>结束时间：</p>
                    <div class="value">{{ currentNode?.update_time }}</div>
                  </div>
                  <div class="form-item flex--center" style="width:100%">
                    <p>结束原因：</p>
                    <div class="value">{{ currentNode?.status }}</div>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </template>
      <!-- 底部按钮 -->
      <template #footer>
        <div style="flex: auto;padding-left: 170px;" :class='Rt?.edges?.length ? "flex--center" : "flex-end-center"'>
          <el-button @click="handleCancel()">{{ type === '流转' ? '取 消' : '关 闭' }}</el-button>
          <template v-if="type === '流转' && nextAble">
            <template v-for="edge in Rt.edges">
              <el-button type="primary" @click="handleMainNextEdge(edge.properties.sql_id)">
                {{ edge.text?.value || '下一步' }}
              </el-button>
            </template>
            <div v-if="Rt.edges?.length && !Rt.endtime && !currentNode?.label?.includes('结束') && !currentNode?.label?.includes('中') &&  !currentNode?.label?.includes('公示')" @click="toTop"
              style="color:rgb(64, 158, 255);font-size: 14px;margin-left: 40px;">去编辑项目基础信息
            </div>
          </template>
          <template v-if="type === '流转' && nowNodeUser && (Rt.currentNode?.label.includes('投票') || Rt.currentNode?.label.includes('意见')) && !Rt.currentNode?.label.includes('发起') && dayjs().isBefore(Rt.endtime)">
            <div class="flex-sb" style="width: 100%;padding-left: 40px;">
              <el-button type="" @click="handleVote('反对')" style="width: 30%;">
                不同意 {{ Rt.vote?.data.length ? Rt.vote.data[0]['反对'] : 0 }}
              </el-button>
              <el-button type="primary" @click="handleVote('赞成')" style="width: 30%;">
                同意 {{ Rt.vote?.data.length ? Rt.vote.data[0]['赞成'] : 0  }}
              </el-button>
            </div>
          </template>
        </div>
      </template>
    </el-drawer>
  </div>

  <Nodeuser v-if="nodeuserRt.show" :title="nodeuserRt.title" :nodeID="nodeuserRt.nodeID" :eventID="event.id" :typeObj="typeObj" :viewNodeRoles="viewNodeRoles"
    @closed="NodeUserClose()" />
</template>

<style lang="scss" scoped>
.el-active-status {
  width: 30px;
  height: 30px;
  position: relative;
}

.el-default-status {
  width: 30px;
  height: 30px;
  font-size: 10px;
  background-color: #DDDDDD;
  // line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #FFFFFF;
  position: relative;

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 20px;
  }
}

.step-line {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  width: 100px;
  height: 2px;
  transform: translateY(-50%);
  background-color: #DDDDDD;
}

.check-svg {
  width: 30px;
  height: 30px;
}

.choose-line {
  background-color: #1F89FF !important;
}

.step-status-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.step-status {
  display: flex;
  flex-direction: column;
  align-items: center;

  .status-name {
    font-size: 12px;
  }

  .step-title {
    font-size: 10px;
    line-height: 12px;
    color: #333333;
    font-weight: 400;
    padding: 0 2px;
    text-align: center;
    margin-top: 8px;
  }
}

.step-center-line {
  width: 100%;
  padding: 10px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  direction: rtl;

  .step-center {
    height: 50px;

    .center-line {
      width: 2px;
      height: 100%;
      background-color: #DDDDDD;
      margin: 0 auto;
    }
  }
}

.popup .drawer-header {
  font-weight: 500;
  font-size: 20px;
  color: #252525;
}

.content-box {
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
}

.step-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #0079FE;

  &.edit {
    background-color: #C0C0C0;
  }
}

.step-header {
  .title-name {
    font-weight: 600;
    font-size: 18px;
    color: #111111;
    margin-right: 12px;
  }

  .defaule-title {
    font-weight: 400;
    font-size: 14px;
    color: #888888;
    padding: 0 20px;
  }

  i {
    margin: 0 0 0 4px;
  }

  .create {
    font-weight: 400;
    font-size: 14px;
    color: #888888;
    margin: 0 8px;
  }

  strong {
    font-weight: 500;
    font-size: 14px;
    color: #111111;
  }
}

.detail-box,
.stepinfo-box,
.edit-box {
  flex: 1;
  position: relative;
  align-content: flex-start;
  margin-top: 4px;
  padding: 4px 12px;
}

.detail-box {
  background-color: #F4F9FF;

  .event-name {
    font-weight: 400;
    font-size: 14px;
    color: #111111;
  }
}

.form-item {
  margin: 8px 0;
  padding: 0 10px;

  p {
    height: 100%;
    width: 100px;
    min-width: 100px;
    text-align: right;
    white-space: wrap;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    padding-right: 4px;

    label {
      position: relative;
      line-height: 32px;

      &.isRequired::before {
        position: absolute;
        content: '*';
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        color: #ff0000;
      }
    }
  }

  .value {
    font-weight: 400;
    font-size: 14px;
    color: #111111;
  }
}

.step-box {
  margin-top: 4px;
}
</style>

<style scoped>
:deep(.el-drawer__body) {
  padding: 26px 0 26px 38px;
  overflow: hidden;
  display: flex;
}

:deep(.el-drawer__header) {
  height: 60px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid #EDEFF3;
}

:deep(.el-step) {
  flex-basis: auto !important;
}

:deep(.el-step__title) {
  display: flex;
  align-items: center;
}

:deep(.el-step__description) {
  padding-right: 38px !important;
  padding-bottom: 32px;
}

:deep(.popup .el-form-item__content) {
  align-content: flex-start;
  /* 不加这个文本域以及上传资料之后对不齐 */
}

:deep(.popup .el-date-editor--datetime) {
  width: 90%;
}

:deep(.filter-tree .el-select-dropdown .el-icon) {
  font-size: 18px;
  margin-right: 5px;
}

:deep(.filter-tree .el-select-dropdown .el-tree-node__content) {
  height: 30px;
  cursor: default;
}

:deep(.filter-tree .el-select-dropdown .el-select-dropdown__item) {
  font-size: 15px;
}

:deep(.filter-tree .el-select-dropdown .el-select-dropdown__wrap) {
  max-height: 450px;
}
</style>